<template>
	<a-card style="margin: -15px">
	<!--站内公告查询条件-->
	<a-row style="margin-bottom: 1rem">
		<!--放置搜索条件-->
		<a-col :span="3">
			<a-select
				ref="select"
				v-model:value="this.page.status"
				style="width: 80px;margin-top: 4px"
				@focus="focus"
				@change="handleChange"
				placeholder="状态"
			>
				<a-select-option value="0">未发布</a-select-option>
				<a-select-option value="1">已发布</a-select-option>
				<a-select-option value="">全部</a-select-option>

			</a-select>
		</a-col>
		<a-col :span="6">
			<a-input-search
				v-model:value="this.page.keyword"
				placeholder="搜索关键字"
				enter-button="搜索"
				size="large"
				@search="onSearch"
			/>
		</a-col>
		<a-col :push=this.number :span="3">
			<a-button type="primary" style="width: 90px;height: 40px" @click="addNotice">
				<PlusOutlined/>
				添加
			</a-button>
		</a-col>

	</a-row>
	<!--站内公告列表-->
	<a-row style="margin-bottom: 1rem">
		<a-col :span="24">
			<a-table :columns="columns" :data-source="data" :pagination="false">

				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'notice'">
						<span v-if="record.type==5">【上新】</span>
						<span v-if="record.type==6">【合成】</span>
						<span v-if="record.type==7">【空投】</span>
						<span v-if="record.type==8">【活动】</span>
						<span v-if="record.type==9">【运营】</span>
						<span>{{ record.title }}</span>
					</template>
					<template v-if="column.key === 'action'">
           <span v-if="record.status==0">
            <a-dropdown>
      <template #overlay>
        <a-menu>
          <a-menu-item key="3" @click="update(record.id)">修改</a-menu-item>
          <a-menu-item key="4" @click="getAuthor(record.id)">查看</a-menu-item>
          <a-menu-item key="5" @click="del(record.id)">删除</a-menu-item>
          <a-menu-item key="7" @click="start(record.id)">发布</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        操作
        <DownOutlined/>
      </a-button>
    </a-dropdown>
           </span>

						<span v-if="record.status==1">
            <a-dropdown>
      <template #overlay>
        <a-menu>
          <a-menu-item key="4" @click="getAuthor(record.id)">查看</a-menu-item>
          <a-menu-item key="6" @click="dis(record.id)">禁用</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        操作
        <DownOutlined/>
      </a-button>
    </a-dropdown>
           </span>

					</template>
					<template v-if="column.key === 'status'">
						<a-tag v-if="record.status==0" :bordered="false" color="default">暂未发布</a-tag>
						<a-tag v-if="record.status==1" :bordered="false" color="success">已发布</a-tag>
					</template>
					<template v-if="column.key ==='updateTime'">
						<span v-if="record.updateTime==null">暂未更新</span>
					</template>
				</template>
			</a-table>
		</a-col>
	</a-row>
	<!--分页组件-->
		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
		</a-flex>
	</a-card>

	<!--  修改抽屉-->
	<a-drawer
		title="编辑站内公告"
		:width="750"
		:open="updateOpen"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<template #extra>
			<a-button style="margin-right: 8px" @click="onClose()">取消</a-button>
			<a-button type="primary" @click="editNotice()">保存</a-button>
		</template>

		<!--修改的表单-->
		<a-form :model="editNoticeInfo" ref="formRef" layout="vertical">
			<!--站内公告标题-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item
						label="站内公告标题:"
						name="title"
						:rules="[{ required: true, message: '站内公告标题不能为空!' },{min: 1,max:125, message: '您填写的站内公告标题过长'}]"
					>
						<a-textarea v-model:value="editNoticeInfo.title" placeholder="请填写站内公告标题"/>
					</a-form-item>
				</a-col>
			</a-row>

			<!--站内公告发布时间-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item
						label="发布时间:"
						name="issueTime"
					>
						<a-space direction="vertical" :size="12">
							<a-date-picker show-time placeholder="请选择发布时间" @change="onChanger" @ok="onOk"
										   v-model:value="editNoticeInfo.issueTime" value-format="YYYY-MM-DD HH:mm:ss"/>
						</a-space>
					</a-form-item>
				</a-col>
			</a-row>

			<!--站内公告类型-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item ref="type" label="类型:" name="type">
						<a-radio-group v-model:value="editNoticeInfo.type">
							<a-radio v-for="item in dict" :value="item.id">{{ item.dictLabel }}</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<!--站内公告发布描述-->
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item
						label="站内公告描述:"
						name="content"
					>
						<XEditable v-model="this.editNoticeInfo.content" placeholder="请输入描述"></XEditable>
					</a-form-item>
				</a-col>
			</a-row>


		</a-form>

	</a-drawer>
	<!--  添加抽屉-->
	<a-drawer
		title="添加站内公告信息"
		:width="750"
		:open="addOpen"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="addOnClose"
	>
		<template #extra>
			<a-button style="margin-right: 8px" @click="addOnClose()">取消</a-button>
			<a-button type="primary" @click="saveAuthor()">保存</a-button>
		</template>
		<!--添加的表单-->
		<a-form :model="noticeInfo" ref="formRef" layout="vertical">
			<!--站内公告标题-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item
						label="站内公告标题:"
						name="title"
						:rules="[{ required: true, message: '站内公告标题不能为空!' },{min: 1,max:125, message: '您填写的站内公告标题过长'}]"
					>
						<a-textarea v-model:value="noticeInfo.title" placeholder="请填写站内公告标题"/>
					</a-form-item>
				</a-col>
			</a-row>

<!--			&lt;!&ndash;站内公告发布时间&ndash;&gt;-->
<!--			<a-row :gutter="20">-->
<!--				<a-col :span="20">-->
<!--					<a-form-item-->
<!--						label="发布时间:"-->
<!--						name="issueTime"-->
<!--					>-->
<!--						<a-space direction="vertical" :size="12">-->
<!--							<a-date-picker show-time placeholder="请选择发布时间" @change="onChanger" @ok="onOk"-->
<!--										   v-model:value="noticeInfo.issueTime" value-format="YYYY-MM-DD HH:mm:ss"/>-->
<!--						</a-space>-->
<!--					</a-form-item>-->
<!--				</a-col>-->
<!--			</a-row>-->

			<!--站内公告类型-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item ref="type" label="类型:" name="type" :required="[{ required: true, message: '请选择站内公告类型', trigger: 'change' }]" >
						<a-radio-group v-model:value="noticeInfo.type">
							<a-radio v-for="item in dict" :value="item.id" :name="item.category">{{
									item.dictLabel
								}}
							</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<!--站内公告状态-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item ref="type" label="状态:" name="type" :required="[{ required: true, message: '请选择站内公告状态', trigger: 'change' }]">
						<a-radio-group v-model:value="noticeInfo.status">
							<a-radio value="0">暂不发布</a-radio>
							<a-radio value="1">立即发布</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<!--站内公告发布描述-->
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item
						label="站内公告描述:"
						name="content"
					>
						<XEditable v-model="this.noticeInfo.content" placeholder="请输入描述"></XEditable>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-drawer>
	<!--  查看详情-->
	<template>
		<div>
			<a-modal v-model:open="this.openn" width="500px" title="站内公告信息">
				<br/>
				<a-descriptions :column=1>

					<a-descriptions-item label="标题">{{ this.getNoticeInfo.title }}</a-descriptions-item>
					<a-descriptions-item label="类型">
						<span v-if=" this.getNoticeInfo.type==5">上新</span>
						<span v-if=" this.getNoticeInfo.type==6">合成</span>
						<span v-if=" this.getNoticeInfo.type==7">空投</span>
						<span v-if=" this.getNoticeInfo.type==8">活动</span>
						<span v-if=" this.getNoticeInfo.type==9">运营</span>
					</a-descriptions-item>
					<a-descriptions-item label="状态">
						<span v-if=" this.getNoticeInfo.status==0">暂不发布</span>
						<span v-if=" this.getNoticeInfo.status==1">立即发布</span>
					</a-descriptions-item>
					<a-descriptions-item label="创建人">{{ this.getNoticeInfo.createUser }}</a-descriptions-item>
					<a-descriptions-item label="创建时间">{{ this.getNoticeInfo.createTime }}</a-descriptions-item>
					<a-descriptions-item label="更新人">{{ this.getNoticeInfo.updateUser }}</a-descriptions-item>
					<a-descriptions-item label="更新时间">{{ this.getNoticeInfo.updateTime }}</a-descriptions-item>
					<a-descriptions-item label="信息">
						<div v-html="this.getNoticeInfo.content"></div>
					</a-descriptions-item>

				</a-descriptions>
			</a-modal>
		</div>
	</template>

</template>


<script>

// import {message} from 'ant-design-vue';
import XEditable from '@/components/Editor/index.vue'

const key = 'updatable';
import instation from "@/api/nft/content/instation";
import {message} from "ant-design-vue";

export default {
	components: {
		XEditable
	},
	name: "instation",
	data() {
		return {
			content: '',
			number: 13,
			pagination: 11,

			//抽屉
			updateOpen: false,
			addOpen: false,
			openn: false,
			page: {
				keyword: '',
				status: '',
				pageNo: 1,
				pageSize: 5,
				total: ''
			},
			//列表
			columns: [
				{
					title: '公告信息',
					dataIndex: 'notice',
					key: 'notice',
				},
				{
					title: '公告状态',
					dataIndex: 'status',
					key: 'status',
				},
				{
					title: '发布时间',
					dataIndex: 'issueTime',
					key: 'issueTime',
				},

				{
					title: '更新时间',
					dataIndex: 'updateTime',
					key: 'updateTime',
				},
				{
					title: '操作',
					key: 'action'
				}
			],
			//字典
			dict: [],
			//列表查出来的数据
			data: [],
			//站内公告添加对象
			noticeInfo: {
				title: '',
				type: '',
				status: '',
				content: '',
				issueTime: ''
			},
			//站内公告修改对象
			editNoticeInfo: {
				id: '',
				title: '',
				type: '',
				content: '',
				issueTime: ''
			},
			//站内公告查看对象
			getNoticeInfo: {
				title: '',
				type: '',
				status: '',
				content: '',
				issueTime: '',
				createUser: '',
				createTime: '',
				updateUser: '',
				updateTime: ''
			},

		}
	},
	methods: {
		//分页查询站内公告
		query() {
			debugger
			instation.queryList(this.page).then((res) => {
				debugger
				this.data = res.records;
				this.page.pageSize = res.size;
				this.page.total = res.total;
			}).catch((error) => {
				message.error(error);
			})
		},
		//搜索框
		onSearch() {
			this.page.pageNo = 1;
			this.query();
		},
		//分页插件
		onChange(pageNo) {
			this.query();
			this.page.pageNo = pageNo;

		},
		//添加站内公告
		saveAuthor() {
			debugger
			//通过ref定位到from表单
			let formRef = this.$refs.formRef;
			//触发from表单的验证
			debugger
			formRef.validate().then(() => {
				debugger
				instation.addNotice(this.noticeInfo).then((res) => {
					this.query();
					this.addOpen = false;
				}).catch((error) => {
					message.error(error);
				})

			})
		},
		//抽屉添加弹出事件
		addNotice() {
			debugger
			instation.queryDict().then((res) => {
				this.dict = res;
			})
			this.addOpen = true;
		},
		addOnClose() {
			this.addOpen = false;

			this.$refs['formRef'].resetFields();
		},
		//操作(查看)
		getAuthor(type) {
			this.openn = true;
			instation.getNotice(type).then((res) => {
				this.getNoticeInfo = res;
			}).catch((error) => {
				message.error(error);
			})

		},
		//操作(修改)
		update(type) {
			debugger
			instation.queryDict().then((res) => {
				this.dict = res;
			})
			instation.getNotice(type).then((resp) => {
				debugger
				this.editNoticeInfo.id = resp.id;
				this.editNoticeInfo.title = resp.title;
				this.editNoticeInfo.type = resp.type;
				this.editNoticeInfo.issueTime = resp.issueTime;
				this.editNoticeInfo.content = resp.content;
			}).catch((error) => {
				alert(error)
			})
			this.updateOpen = true;
		},
		//抽屉修改取消事件
		onClose() {
			this.updateOpen = false;
			this.$refs['formRef'].resetFields();
		},
		//修改创作者
		editNotice() {
			debugger
			//通过ref定位到from表单
			let formRef = this.$refs.formRef;
			//触发from表单的验证
			debugger
			formRef.validate().then(() => {
				debugger

				instation.editNotice(this.editNoticeInfo).then((resp) => {

				}).catch((error) => {
					message.error(error);
				})
				this.updateOpen = false;
				this.query();
			}).catch((error) => {
				message.error('修改失败');
			})
		},

		//操作(删除)
		del(type) {
			instation.delNotice(type).then((resp) => {

				message.loading({content: '删除中...', key});
				setTimeout(() => {
					message.success({content: '操作成功', duration: 2});
					this.query();
				}, 2000);

			}).catch((error) => {
				debugger
				message.error(error);
			})
		},


		//发布
		start(type) {
			debugger
			instation.startNotice(type).then((resp) => {
				message.loading({content: '发布中...', key});
				setTimeout(() => {
					message.success({content: '操作成功', duration: 2});
					this.query();
				}, 2000);
			}).catch((error) => {
				message.error(error);
			})

		},
		//禁用
		dis(type) {
			instation.disNotice(type).then((resp) => {
				this.query();
			}).catch((error) => {
				message.error(error);
			})
		}
	},
	mounted() {
		this.query();

	}
}
</script>

<style scoped>

</style>
